<template>
<div>
  <basic-container>
    <h3>数据看板</h3>
      <div class="wel-info" id="mountNode">
     </div>
  </basic-container>


  <el-row :span="24">

    <!--第一个卡片-->
    <el-col :md="12"
            :xs="24"
            :sm="24">
      <basic-container>
        <div class="wel-info">
          <div class="wel-info" id="mountNode2"/>
        </div>
      </basic-container>
    </el-col>

    <!--第二个卡片-->
    <el-col :md="12"
            :xs="24"
            :sm="24">
      <basic-container>
        <div class="wel-info">
          第二个卡片
        </div>

      </basic-container>
    </el-col>

  </el-row>

</div>

</template>

<script>
  import G2 from '@antv/g2'
  export default {
    name: 'mini',
    data() {
      return {
        mydata: [{
          year: '1991',
          value: 3
        }, {
          year: '1992',
          value: 4
        }, {
          year: '1993',
          value: 3.5
        }, {
          year: '1994',
          value: 5
        }, {
          year: '1995',
          value: 4.9
        }, {
          year: '1996',
          value: 6
        }, {
          year: '1997',
          value: 7
        }, {
          year: '1998',
          value: 9
        }, {
          year: '1999',
          value: 13
        }]
      }
    },
    mounted() {
      this.init();
    },
    methods:{
      init(){
        var chart1 = new G2.Chart({
          container: 'mountNode',
          forceFit: true,
          height: window.innerHeight
        });
        var chart2 = new G2.Chart({
          container: 'mountNode2',
          forceFit: true,
          height: window.innerHeight
        });
        this.dorender(chart1);
        this.dorender(chart2);
      },
      dorender(chart){

        chart.source(this.mydata);
        chart.scale('value', {
          min: 0
        });
        chart.scale('year', {
          range: [0, 1]
        });
        chart.tooltip({
          crosshairs: {
            type: 'line'
          }
        });
        chart.line().position('year*value');
        chart.point().position('year*value').size(4).shape('circle').style({
          stroke: '#fff',
          lineWidth: 1
        });
        chart.render();
      }
    }
  }
</script>

<style scoped>
  .g2-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    border-radius: 4px 4px 0 0;
    table-layout: fixed;
  }
  .g2-thead {
    display: table-header-group;
    vertical-align: middle;
    border-bottom-color: #e8e8e8;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    background-color: #fafafa
  }
  .th-index {
    width: 30px;
  }
  .g2-thead th {
    text-align: center;
    height: 30px;
    font-size: 12px;
  }
  .th-index {
    width: 10%;
  }
  .th-id {
    width: 15%;
  }
  .th-time {
    width: 20%;
  }
  .th-status {
    width: 20%;
  }
  .g2-table-row {
    height: 30px;
    vertical-align: middle;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #e8e8e8;
  }
  .g2-table-column {
    font-size: 12px;
    color: #8c8c8c;
    padding: 15px;
    text-align: center
  }
  .before-start {
    color: #bfbfbf;
  }
  .in-processing {
    color: #1890ff;
  }
  .fail {
    color: #f5222d;
  }
  .sucess {
    color: #52c41a;
  }
  .abnormal {
    color: #faad14;
  }
  li {
    font-size: 12px;
  }
  li span {
    color: #8c8c8c;
  }
  .g2-guide-html {
    width: 50px;
    height: 30px;
    vertical-align: middle;
    line-height: 0.8
  }
  .g2-guide-html .title {
    font-size: 12px;
    color: #8c8c8c;
    font-weight: 300;
  }
  .g2-guide-html .value {
    font-size: 14px;
    color: #000;
    font-weight: bold;
  }
</style>
